<template>
  <v-form
      ref="form"
      :lazy-validation="false"
    >
    <v-card flat>
      <v-card-text>
        <v-expansion-panels
          v-model="panel"
          multiple
          tile
        >
          <v-expansion-panel>
            <v-expansion-panel-header>行程基本信息</v-expansion-panel-header>
            <v-divider />
            <v-expansion-panel-content>
              <v-row align="center" class="mt-5">
                <div style="width: 140px;" class="text-right">行程名称：</div>
                <v-col>{{ detailData.foundation_prodcut_name }}</v-col>
              </v-row>
              <v-row align="center">
                  <div style="width: 140px;" class="text-right">购物安排：</div>
                  <v-col class="pa-0">
                    <DictCombobox v-model="formData.detail.shopping" type="shopping" multiple/>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <div style="width: 140px;" class="text-right">自费项目：</div>
                  <DictCombobox v-model="formData.detail.self_cost" type="selfcost" multiple/>
                </v-row>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-card-text>
  </v-card>
  </v-form>
</template>

<script>
export default {
  data() {
    return {
      detailData: {
        foundation_prodcut_name: ''
      },
      panel: [0],
      formData: {
        detail: {
          self_cost: [],
          shopping: []
        }
      }
    }
  }
}
</script>

<style>

</style>